<!-- 筛选条件 -->
<template>
  <div class="main">
    <!-- 表格搜索 -->
    <OrderForm
      ref="formRef"
      v-model="queryParams"
      class="search-form"
      :form-option="SearchOption"
      :select-list="dicLists"
      @handleEvent="handleEvent"
    />
    <!-- 查询按钮 -->
    <BtnConfig :btn-configs="btnOption[btnType]" @propClick="handleClick" />
  </div>
</template>

<script>
import OrderForm from '../components/OrderForm.vue'
import BtnConfig from '@/components/basic/btnConfig.vue'
import { SearchOption, btnOptionA, btnOptionB } from '../index.js'
import {
    getBalanceBasicDetails
} from '@/api/settlement/balanceSettlement.js'
export default {
    name: 'FilterCriteria',
    components: {
        OrderForm,
        BtnConfig
    },
    props: {
        // 浏览器参数
        urlData: {
            type: Object,
            default: () => ({ })
        }
    },
    data() {
        return {
            // 默认显示的按钮类型
            btnType: 'B',
            // 不同场景展示不同按钮方法
            btnOption: {
                'A': btnOptionA, // 更新商合采购订单按钮
                'B': btnOptionB// 取消更新商合采购订单
            },
            SearchOption, // 表单配置项
            queryParams: {}, // 下拉框选择的数据
            // 下拉框options 数据
            dicLists: {
                PRO_STAGE: [
                    { dictId: 0, dictName: '否' },
                    { dictId: 1, dictName: '是' }]
            }
        }
    },
    watch: {
        urlData: {
            handler(val) {
                this.initJudgeUpdate(val)
            },
            deep: true,
            immediate: true
        }
    },
    methods: {
        // 下拉框选择回调函数
        handleEvent(prop, row) {
            console.log("[]");
        },
        // 查询按钮点击回调函数
        handleClick(fun) {
            this.$emit(fun)
        },
        // 初始化为了显示是否更新商合订单按钮
        async initJudgeUpdate(obj) {
            const { adjustId } = obj
            if (!adjustId) {
                return
            }
            // 获取结算当前基本信息
            const { code, data } = await getBalanceBasicDetails(adjustId)
            if (+code === 200) {
                this.changeValue(Number(data.isUpdateOrder))
            }
        },
        // 初始化下拉框值  需要调接口
        changeValue(val) {
            this.SearchOption.itemData.forEach((item) => {
                item.value = val
            })
            // 判断当前是更新 还是没更新商合订单
            this.btnType = val === 1 ? 'B' : 'A'
            if (this.$refs.formRef !== undefined) {
                this.$refs.formRef.initData(this.SearchOption)
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.main {
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: right;

    .search-form {
        width: 192px;
        margin-right: 0;
    }
}

.main ::v-deep .el-row {
    width: 200px;
    height: 28px;
}

.main ::v-deep .btnBox {
    z-index: 1;
}

.main ::v-deep .pms-details .el-form-item__content .el-select--mini .el-input__inner {
    padding: 0px 8px;
}

.main ::v-deep .el-input__suffix {
    right: -3px;
}
</style>
